<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>文章展示列表</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="icon" href="images/favicon.ico"
			type="image/vnd.microsoft.icon">

		<link href="<%=basePath%>css/dialog/dialog.css" rel="stylesheet">
		<link href="<%=basePath%>css/smoothness/jquery-ui.css" rel="stylesheet">
		<style type="text/css">
			body {
				font: 62.5% "Trebuchet MS", sans-serif;
				margin: 50px;
			}
			
			.demoHeaders {
				margin-top: 2em;
			}
			
			#dialog-link {
				padding: .4em 1em .4em 20px;
				text-decoration: none;
				position: relative;
			}
			
			#dialog-link span.ui-icon {
				margin: 0 5px 0 0;
				position: absolute;
				left: .2em;
				top: 50%;
				margin-top: -8px;
			}
			
			#icons {
				margin: 0;
				padding: 0;
			}
			
			#icons li {
				margin: 2px;
				position: relative;
				padding: 4px 0;
				cursor: pointer;
				float: left;
				list-style: none;
			}
			
			#icons span.ui-icon {
				float: left;
				margin: 0 4px;
			}
			
			#feedback { font-size: 1.4em; }
  			#selectable .ui-selecting { background: #FECA40; }
  			#selectable .ui-selected { background: #F39814; color: white; }
  			#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  			#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
		</style>

		<script src="<%=basePath%>js/jquery-1.8.3.js" type="text/javascript"></script>
		<script src="<%=basePath%>js/jquery-ui.min.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			$(function() {
		    	$( "#selectable" ).selectable({
		    		stop: function( event, ui ) {
		    			$( ".ui-selected", this ).each(function() {
		    				//alert($(this).attr('id'));
		    				var ifm = document.getElementById("iframe0");
		    				ifm.src = '<%=basePath%>article/show.wkm?articleId=' + $(this).attr('id');
		    		    });
		    		}
		    	
		    	});
		  	});
		
			function showArticle(path){
				alter(path);
				var ifm = document.getElementById("iframe0");
				ifm.src = path;
			}
		
		</script>
	</head>

	<body>
		<div  style="width: 30%; float: left">
				<ol id="selectable" style="width: 100%">
					<c:forEach var="item" items="${list}" varStatus="index">
						<li class="ui-widget-content" id="${item.articleId }">${item.articleName }</li>
					</c:forEach>
				</ol>
		</div>
				
		<div style="width: 70%; float: right;">
			  <iframe id="iframe0" style="margin-top: 0;margin-left: 0;margin-right: 0" scrolling="yes" width=100% frameborder="0" height="100%" src="<%=basePath%>article/show.wkm?articleId=${articleId }">首页</iframe>
		</div>
	</body>
</html>
